<template>
  <view class="productList">
    <view class="product" v-for="(item, index) in list" :key="index" @click="getProductDetail(item)">
      <view class="item">
        <view class="image">
          <uv-image width="330rpx" height="330rpx" :src="item.image || ASSETSURL + 'zhu.png'" radius="12rpx"></uv-image>
        </view>
        <view class="name uv-line-1">{{ item.product_name || '--' }}</view>
        <view class="price flex-bet">
          <view class="flex align-ali">
            <text class="text1" :style="{ fontWeight: isRecommend ? '700' : '500' }">￥{{ (item.price / 100) || 0
            }}</text>
            <text class="text2" v-if="!isRecommend">￥{{ (item.ot_price / 100) || 0 }}</text>
          </view>
          <!-- <view class="buy p-b-10" v-if="isRecommend">立即购买</view> -->
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import route from '@/uni_modules/uv-ui-tools/libs/util/route.js';
import { array } from '../../uni_modules/uv-ui-tools/libs/function/test';
const props = defineProps({
  list: {
    type: array,
    default: [{}, {}, {}]
  },
  isRecommend: {
    type: Boolean,
    default: false
  }
});
// 商品详情
const getProductDetail = (e) => {
  route({
    url: 'pagesA/pages/productList/productDetails',
    params: {
      id: e.id
    }
  });
};
</script>

<style lang="scss" scoped>
.productList {
  display: flex;
  flex-wrap: wrap;
  grid-gap: 26rpx;
  padding: 0 32rpx;
  box-sizing: border-box;
  margin-top: 49rpx;

  .product {
    width: 48%;

    .item {
      .name {
        margin-top: 20rpx;
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 32rpx;
        vertical-align: middle;
      }

      .price {
        display: flex;
        align-items: center;
        margin-top: 21rpx;

        .text1 {
          font-family: Source Han Sans CN;
          font-weight: 700;
          font-size: 36rpx;
          color: #a30114;
        }

        .text2 {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 24prx;
          vertical-align: middle;
          text-decoration: line-through;
          margin-left: 16rpx;
          color: #999999;
        }
      }
    }
  }
}

.buy {
  color: #1e1e1e;
  font-feature-settings: 'liga' off, 'clig' off;
  font-family: 'Source Han Sans CN';
  font-size: 26rpx;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  position: relative;

  &::after {
    content: '';
    width: 104rpx;
    height: 2rpx;
    flex-shrink: 0;
    background: #1e1e1e;
    position: absolute;
    bottom: 0;
    left: 0;
  }
}
</style>
